<template>
  <Page class="min-h-screen bg-gradient-to-br from-[#f5f5f5] to-[#eef2f7] pb-[40rpx]">
    <view class="max-w-[750rpx] mx-auto">
      <!-- 头部区域 -->
      <view
        class="bg-gradient-to-r from-[#165DFF] to-[#1890ff] text-white px-[32rpx] pt-[32rpx] pb-[80rpx] rounded-b-[32rpx] mb-[-40rpx] relative shadow-md">
        <!-- 返回按钮 -->
        <view
          class="absolute top-[30rpx] left-[30rpx] z-20 w-[60rpx] h-[60rpx] flex items-center justify-center cursor-pointer"
          @click="goBack">
          <IconFont font-class-name="iconfont" class-prefix="icon" name="left" size="20" color="#ffffff" />
        </view>
        <view class="flex justify-between items-center mb-[24rpx]">
          <view class="flex items-center text-[32rpx] font-bold">
            <IconFont name="icon-graduation-cap" class="mr-[12rpx] text-[36rpx]" />
            <text>学无止境</text>
          </view>
          <view class="flex gap-x-[20rpx]">
            <view
              class="w-[44rpx] h-[44rpx] rounded-full bg-[rgba(255,255,255,0.2)] flex items-center justify-center text-white text-[24rpx]">
              <IconFont name="icon-bell" />
            </view>
            <view
              class="w-[44rpx] h-[44rpx] rounded-full bg-[rgba(255,255,255,0.2)] flex items-center justify-center text-white text-[24rpx]">
              <IconFont name="icon-user" />
            </view>
          </view>
        </view>
        <view class="bg-white rounded-[32rpx] p-[16rpx_32rpx] flex items-center shadow-md">
          <IconFont name="icon-search" class="text-[#7f8c8d] mr-[16rpx] text-[28rpx]" />
          <nut-input class="flex-1 border-none outline-none text-[26rpx] bg-transparent" placeholder="搜索课程、讲师或关键词..." />
        </view>
      </view>

      <!-- 分类区域 -->
      <view class="flex overflow-x-auto py-[24rpx] gap-x-[20rpx] my-[40rpx_0_24rpx]">
        <view v-for="(category, index) in categories" :key="index"
          class="flex-0 flex-none bg-white rounded-[24rpx] p-[24rpx] text-center shadow-md min-w-[120rpx] cursor-pointer transition-all duration-300"
          :class="{
            'bg-blue-500 text-white font-bold shadow-lg':
              activeCategory === index,
            'text-gray-500': activeCategory !== index,
          }" @click="activeCategory = index">
          <!-- <IconFont
            :name="category.icon"
            class="text-[32rpx] mb-[12rpx] block"
          /> -->
          <text class="text-[26rpx]">{{ category.name }}</text>
        </view>
      </view>

      <view class="box-border p-[20rpx]">



        <!-- 精选课程 -->
        <view class="flex justify-between items-center my-[30rpx]">
          <h2 class="text-[32rpx] font-bold text-[#222]">精选课程</h2>
          <view @tap="goMore(1)" class="text-[#165DFF] text-[24rpx]">查看全部
            <IconFont name="right" class="ml-[10rpx]" size="12" />
          </view>
        </view>
        <view class="grid grid-cols-2 gap-[20rpx] mb-[24rpx]">
          <view v-for="(course, index) in featuredCourses" :key="index"
            class="bg-white rounded-[24rpx] overflow-hidden shadow-md transition-transform duration-300 hover:translate-y-[-8rpx]"
            @click="handleCourseClick(course)">
            <view class="h-[140rpx] relative overflow-hidden">
              <image :src="course.image" mode="widthFix" class="w-full h-full object-cover" />
              <view
                class="absolute top-[16rpx] right-[16rpx] bg-[#9b59b6] text-white text-[20rpx] px-[12rpx] rounded-[16rpx] font-bold"
                v-if="course.badge">{{ course.badge }}</view>
            </view>
            <view class="p-[20rpx]">
              <view class="font-bold mb-[12rpx] text-[26rpx] block line-clamp-2">
                {{ course.title }}
              </view>
              <view class="flex items-center mb-[12rpx] text-[22rpx] text-[#7f8c8d]">
                <view
                  class="w-[32rpx] h-[32rpx] rounded-full bg-[#165DFF] text-white flex items-center justify-center text-[22rpx] mr-[12rpx]">
                  {{ course.instructorInitial }}</view>
                <text>{{ course.instructor }}</text>
              </view>
              <view class="flex justify-between text-[22rpx] text-[#7f8c8d]">
                <view>
                  <IconFont name="icon-users" class="inline-block mr-[6rpx]" />{{
                    course.students
                  }}
                </view>
                <view class="text-[#f39c12] font-bold text-[26rpx]">{{
                  course.price
                  }}</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 学习进度 -->
        <view class="bg-white rounded-[32rpx] overflow-hidden shadow-md mb-[32rpx]">
          <view class="p-[24rpx_24rpx_16rpx] bg-gradient-to-r from-[#9b59b6] to-[#8e44ad] text-white rounded-t-[32rpx]">
            <h2 class="flex items-center text-[32rpx] font-bold">
              <IconFont name="icon-star" class="mr-[12rpx]" /> 我的学习进度
            </h2>
          </view>
          <view class="p-[20rpx]">
            <view v-for="(progress, index) in learningProgress" :key="index"
              class="flex mb-[20rpx] pb-[20rpx] border-b border-[#e0e0e0] last:border-b-0 last:mb-0 last:pb-0">
              <view class="w-[120rpx] h-[96rpx] rounded-[16rpx] overflow-hidden flex-shrink-0 mr-[20rpx]">
                <image :src="progress.image" mode="widthFix" class="w-full h-full object-cover" />
              </view>
              <view class="flex-1">
                <h3 class="font-bold mb-[8rpx] text-[26rpx]">
                  {{ progress.title }}
                </h3>
                <view class="h-[8rpx] bg-[#ecf0f1] rounded-[4rpx] overflow-hidden mt-[12rpx]">
                  <view class="h-full bg-[#2ecc71] rounded-[4rpx]" :style="{ width: progress.percentage + '%' }" />
                </view>
                <view class="flex justify-between text-[22rpx] text-[#7f8c8d] mt-[12rpx]">
                  <text>{{ progress.chapters }}</text>
                  <text>{{ progress.percentage }}% 完成</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 学习统计 -->
        <view class="grid grid-cols-3 gap-[20rpx] my-[24rpx_0]">
          <view v-for="(stat, index) in stats" :key="index"
            class="bg-white rounded-[24rpx] p-[24rpx] text-center shadow-md">
            <view
              class="w-[48rpx] h-[48rpx] rounded-full mx-auto mb-[12rpx] flex items-center justify-center text-[28rpx]">
              <IconFont :name="stat.icon" />
            </view>
            <view class="text-[32rpx] font-bold mb-[6rpx]">{{ stat.value }}</view>
            <view class="text-[22rpx] text-[#7f8c8d]">{{ stat.label }}</view>
          </view>
        </view>

        <!-- 热门推荐 -->
        <view class="flex justify-between items-center my-[30rpx]">
          <h2 class="text-[32rpx] font-bold text-[#222]">热门推荐</h2>
          <view @tap="goMore(2)" class="text-[#165DFF] text-[24rpx] flex items-center">更多推荐
            <IconFont name="right" class="ml-[10rpx]" size="12" />
          </view>
        </view>
        <view class="grid grid-cols-2 gap-[20rpx] mb-[24rpx]">
          <view v-for="(course, index) in recommendedCourses" :key="index"
            class="bg-white rounded-[24rpx] overflow-hidden shadow-md transition-transform duration-300 hover:translate-y-[-8rpx]"
            @click="handleCourseClick(course)">
            <view class="h-[140rpx] relative overflow-hidden">
              <image :src="course.image" mode="widthFix" class="w-full h-full object-cover" />
              <view
                class="absolute top-[16rpx] right-[16rpx] bg-[#9b59b6] text-white text-[20rpx] px-[12rpx] rounded-[16rpx] font-bold"
                v-if="course.badge">{{ course.badge }}</view>
            </view>
            <view class="p-[20rpx]">
              <h3 class="font-bold mb-[12rpx] text-[26rpx] overflow-hidden">
                {{ course.title }}
              </h3>
              <view class="flex items-center mb-[12rpx] text-[22rpx] text-[#7f8c8d]">
                <view
                  class="w-[32rpx] h-[32rpx] rounded-full bg-[#165DFF] text-white flex items-center justify-center text-[22rpx] mr-[12rpx]">
                  {{ course.instructorInitial }}</view>
                <text>{{ course.instructor }}</text>
              </view>
              <view class="flex justify-between text-[22rpx] text-[#7f8c8d]">
                <view>
                  <IconFont name="icon-users" class="inline-block mr-[6rpx]" />{{
                    course.students
                  }}
                </view>
                <view class="text-[#f39c12] font-bold text-[26rpx]">{{
                  course.price
                  }}</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 学习路径 -->
        <view class="bg-white rounded-[32rpx] p-[32rpx] shadow-md mb-[32rpx]">
          <view class="flex justify-between items-center mb-[24rpx]">
            <h2 class="text-[32rpx] font-bold text-[#222]">学习路径</h2>
            <navigator url="#" class="text-[#165DFF] text-[24rpx]">查看全部
              <IconFont name="right" class="ml-[10rpx]" size="12" />
            </navigator>
          </view>
          <view
            class="bg-gradient-to-r from-[#4a69bd] to-[#6a89cc] rounded-[24rpx] p-[32rpx] text-white relative overflow-hidden">
            <view
              class="absolute top-[-50rpx] right-[-30rpx] w-[150rpx] h-[150rpx] rounded-full bg-[rgba(255,255,255,0.1)]" />
            <h3 class="text-[28rpx] mb-[16rpx] relative font-bold">
              成为前端开发专家
            </h3>
            <p class="text-[22rpx] mb-[24rpx] relative">
              通过系统学习HTML、CSS、JavaScript及流行框架，掌握前端开发核心技能
            </p>
            <nut-button
              class="bg-white text-[#4a69bd] border-none rounded-[32rpx] px-[32rpx] py-[16rpx] font-bold text-[26rpx] min-h-[60rpx] shadow-md"
              @click="handlePathClick('成为前端开发专家')">
              开始学习
            </nut-button>
          </view>
        </view>
      </view>
    </view>
  </Page>
</template>

<script setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { Input as nutInput, Button as nutButton } from "@nutui/nutui-taro";
// import { navigator } from '@tarojs/components'

// 返回上一页
const goBack = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

// 分类数据
const categories = [
  { name: "编程", icon: "icon-code" },
  { name: "设计", icon: "icon-paint-brush" },
  { name: "营销", icon: "icon-chart-line" },
  { name: "语言", icon: "icon-language" },
  { name: "音乐", icon: "icon-music" },
  { name: "摄影", icon: "icon-camera" },
  { name: "商业", icon: "icon-briefcase" },
];

// 精选课程数据
const featuredCourses = [
  {
    title: "Web开发全栈训练营 - 2023最新版",
    image:
      "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    badge: "热门",
    instructor: "张教授",
    instructorInitial: "张",
    students: "1.2万+",
    price: "¥399",
  },
  {
    title: "Python数据分析与人工智能实战",
    image:
      "https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    badge: "新课程",
    instructor: "王博士",
    instructorInitial: "王",
    students: "8,500+",
    price: "¥299",
  },
  {
    title: "UI/UX设计大师班 - 从入门到精通",
    image:
      "https://images.unsplash.com/photo-1542744095-291d1f67b221?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    instructor: "李设计师",
    instructorInitial: "李",
    students: "9,200+",
    price: "¥349",
  },
  {
    title: "Flutter跨平台移动应用开发",
    image:
      "https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    instructor: "陈工程师",
    instructorInitial: "陈",
    students: "6,700+",
    price: "¥279",
  },
];

// 推荐课程数据
const recommendedCourses = [
  {
    title: "数据科学实战：Python与机器学习",
    image:
      "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    badge: "限时优惠",
    instructor: "刘博士",
    instructorInitial: "刘",
    students: "11,400+",
    price: "¥459",
  },
  {
    title: "JavaScript高级编程与框架应用",
    image:
      "https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    instructor: "赵工程师",
    instructorInitial: "赵",
    students: "7,800+",
    price: "¥329",
  },
];

// 学习进度数据
const learningProgress = [
  {
    title: "Web开发全栈训练营",
    image:
      "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    chapters: "12/20 章节",
    percentage: 65,
  },
  {
    title: "Flutter跨平台开发",
    image:
      "https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",
    chapters: "6/20 章节",
    percentage: 30,
  },
];

// 统计数据
const stats = [
  {
    type: "learning",
    icon: "icon-book-open",
    value: "5",
    label: "学习中",
  },
  {
    type: "completed",
    icon: "icon-medal",
    value: "12",
    label: "已完成",
  },
  {
    type: "hours",
    icon: "icon-clock",
    value: "86",
    label: "学习小时",
  },
];

// 底部导航数据
const footerNav = [
  { name: "首页", icon: "icon-home" },
  { name: "我的课程", icon: "icon-book" },
  { name: "发现", icon: "icon-compass" },
  { name: "我的", icon: "icon-user" },
];

// 活跃状态
const activeCategory = ref(0);
const activeNav = ref(0);

// 处理课程点击
const handleCourseClick = (item) => {
  // Taro.showToast({
  //   title: `即将进入课程: ${title}`,
  //   icon: "none",
  //   duration: 2000,
  // });
  Taro.navigateTo({
    url: `/pages/course/detail?id=${item.id}`,
  });
};

// 处理学习路径点击
const handlePathClick = (pathName) => {
  Taro.showToast({
    title: `开始${pathName}学习路径！`,
    icon: "none",
    duration: 2000,
  });
};

const goMore = (n)=>{
  Taro.navigateTo({
    url: '/pages/course/list'
  })
}
</script>
